﻿@model Nullable<Int32>
<style type="text/css">
    .upl
    {
        height: 151px;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 0;
        visibility: visible;
        width: 151px;
    }
    #loadOverlay
    {
        z-index: 1000;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        background-color: Red;
        left: 0;
        position: absolute;
        top: 0;
        display: none;
    }
</style>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.7.min.js")"></script>
<script type="text/javascript">

    var iframe = null;

    function removeIframe() {

        var frame = document.getElementById("upload_iframe");
        frame.parentNode.removeChild(frame);
    }

    function fileUpload(formID, action_url, div_id) {

        var form = document.getElementById(formID);

        //var iframe = document.getElementById("iframe");
        // Create the iframe...
        if (iframe == null)
            iframe = document.createElement("iframe");

        iframe.setAttribute("id", "upload_iframe");
        iframe.setAttribute("name", "upload_iframe");
        iframe.setAttribute("width", "0");
        iframe.setAttribute("height", "0");
        iframe.setAttribute("border", "0");
        iframe.setAttribute("style", "width: 0; height: 0; border: none;");

        // Add to document...
        form.parentNode.appendChild(iframe);
        window.frames['upload_iframe'].name = "upload_iframe";

        iframeId = document.getElementById("upload_iframe");

        // Add event...
        var eventHandler = function () {

            if (iframeId.detachEvent) iframeId.detachEvent("onload", eventHandler);
            else iframeId.removeEventListener("load", eventHandler, false);

            // Message from server...
            if (iframeId.contentDocument) {
                content = iframeId.contentDocument.body.innerHTML;
            } else if (iframeId.contentWindow) {
                content = iframeId.contentWindow.document.body.innerHTML;
            } else if (iframeId.document) {
                content = iframeId.document.body.innerHTML;
            }

            $(parent.document).find("#imagePath").val(content);
            //document.getElementById(div_id).innerHTML = "";
            document.getElementById("loadOverlay").setAttribute("display", "none");
            document.getElementById("profileImage").setAttribute("src", content)

            // Del the iframe...
            // setTimeout(removeIframe, 250);
        }

        if (iframeId.addEventListener) iframeId.addEventListener("load", eventHandler, true);
        if (iframeId.attachEvent) iframeId.attachEvent("onload", eventHandler);

        // Set properties of form...
        form.setAttribute("target", "upload_iframe");
        form.setAttribute("action", action_url);
        form.setAttribute("method", "post");
        form.setAttribute("enctype", "multipart/form-data");
        form.setAttribute("encoding", "multipart/form-data");

        //document.getElementById(div_id).innerHTML = "Uploading...";
        document.getElementById("loadOverlay").setAttribute("display", "block");
        // Submit the form...
        form.submit();
    }

    $(document).ready(function () {

        $("#datafile").change(function () {

            if ($(this).val() && $(this).val().length > 0) {
                fileUpload('imageFileForm', '@Url.Action("UploadTempImageAndTumb", new { userName = "temp" })', 'upload');
            }

            return false;
        });
    });

</script>
@using (Html.BeginForm("", "", FormMethod.Post, new { id = "imageFileForm" }))
{
    <div style="width: 154px; height: 152px; border: 1px solid #C6C6C6; padding: 2px; text-align: center;">
    @if(Model.HasValue)
    {
        <img id="profileImage" src="@Url.Action("GetPromotionPicture", new { id = Model, w = 151, h = 151 })" alt="" />
    }
    else
    {
        <img id="profileImage" src="@Url.Content("~/Content/zatify/images/upload_picture.jpg")" alt="" />
    }
    </div>
    <div id="upload" style="color: #C6C6C6;">
    </div>
    <input class="upl" type="file" id="datafile" name="datafile" style="visibility: visible" />
}
<div id="loadOverlay">
    Loading...
</div>
